<template>
  <div class="scene">
    <div class="title">THE ORANGES</div>
    <div class="spatter">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="shadow shadow--2 shrink"></div>
    <div class="orange orange--2 bounce">
      <div class="dimple-holder">
        <div class="dimples"></div>
        <div class="dimples"></div>
        <div class="inner-shadow"></div>
      </div>
      <div class="glow"></div>
      <div class="stem">
        <div class="stem__base"></div>
        <div class="stem__stalk"></div>
      </div>
    </div>
    <div class="shadow shadow--3"></div>
    <div class="half-orange sigh">
      <div class="peel-outer">
        <div class="peel"></div>
        <div class="dimple-holder">
          <div class="dimples"></div>
          <div class="dimples"></div>
          <div class="inner-shadow"></div>
        </div>
      </div>
      <div class="rind">
        <div class="rind-inner">
          <div class="juicy">
            <div class="center"></div>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
          </div>
        </div>
      </div>
      <div class="drip"></div>
    </div>
    <div class="shadow shrink"></div>
    <div class="orange bounce">
      <div class="dimple-holder">
        <div class="dimples"></div>
        <div class="dimples"></div>
        <div class="inner-shadow"></div>
      </div>
      <div class="glow"></div>
      <div class="stem">
        <div class="stem__base"></div>
        <div class="stem__stalk"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>

@import url('https://fonts.googleapis.com/css?family=Major+Mono+Display&display=swap');
$orange-radius: 200px;
$originX: 60%;
// $trueOrange: orange;
$trueOrange: #ff9810;

.center {
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:10px;
  background:blue;
  z-index:100;
  transform:translate(-50%,-50%);
}

.title {
  position: absolute;
  font-family: 'Major Mono Display', monospace;
  color: $trueOrange;
  top: 16px;
  left: 16px;
  font-size: 22px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;  
  word-spacing: -5px;
  &::before {
    content: '';
    position: absolute;
    top: 32px;
    opacity: 0.25;
    left: 0px;
    height: 3px;
    width: 87px;
    background: $trueOrange;
  }
}

.scene {
    width: 100%;
    position: relative;
    height: 100%;
    // background: radial-gradient(ellipse at center, #a90329 0%, #8f0222 44%, #6d0019 100%);
    background: #8c2a2a;

  }

.shadow {
  position: absolute;
  top: calc(#{$originX} + (#{$orange-radius}/2) - (#{$orange-radius}/7));
  left: calc(50% + 20px - (#{$orange-radius}/2));
  width: $orange-radius;
  height: 50px;
  background: radial-gradient(ellipse at center,  rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 55%);
  &--2 {
    animation-delay: -180ms;
    width: $orange-radius/6*5;
    height: 50/6*5;
    top: calc(#{$originX} + (#{$orange-radius}/2) - (#{$orange-radius}/7) - 50px);
    left: calc(50% + 20px - (#{$orange-radius}/2) + 150px);
  }
  &--3 {
    top: calc(#{$originX} + (#{$orange-radius}/2) - (#{$orange-radius}/7) - 30px);
    left: calc(50% + 20px - (#{$orange-radius}/2) - 160px);
  }
}

.dimple-holder {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.dimples {
  // background: repeating-linear-gradient(0.25turn, transparent 0px, $trueOrange 4px, $trueOrange 10px), 
  //   repeating-linear-gradient(transparent 0px, transparent 9px, darken($trueOrange,25%) 10px);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  & + .dimples {
    top: 5px;
    left: 5px;
    opacity: 0.5;
  }
}

.inner-shadow {
  width: 120%;
  height: 120%;
  position: absolute;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 60%,rgba(0,0,0,0.65) 100%);
}

.orange {
  width: $orange-radius;
  height: $orange-radius;
  border-radius: 100%;
  background: $trueOrange;
  position: absolute;
  top: calc(#{$originX} - (#{$orange-radius}/2));
  left: calc(50% - (#{$orange-radius}/2));
  &--2 {
    width: $orange-radius/6*5;
    height: $orange-radius/6*5;
    top: calc(#{$originX} - (#{$orange-radius}/2) - 20px);
    left: calc(50% - (#{$orange-radius}/2) + 150px);
    animation-delay: -180ms;
    .stem {
      transform: rotate(22deg);
      right: 24px;
      top: 48px;
    }
    .glow {
      top: 25px;
      left: 20px;
    }
  }
}

.half-orange {  
  position: absolute;
  top: calc(#{$originX} - 135px);
  left: calc(50% - 275px);
  width:$orange-radius;
  height:$orange-radius; 
  transform:rotate(-45deg);
  .peel-outer {        
    margin-top:$orange-radius/2;
    overflow:hidden;
    height: $orange-radius/2;
    position: relative;
    .dimple-holder {
      top:-100%;
      height:200%;
      transform: rotate(35deg);
    }
  }
  .peel {
    margin-top:-$orange-radius/2;
    background: $trueOrange;
    width: $orange-radius;
    height: $orange-radius;
    border-radius: 0 0 100% 100%;
  }
  .rind {
    position: absolute;
    top:33.33%;
    left:0;
    right:0;
    border-radius: 100%;
    background:$trueOrange;
    height:$orange-radius/3;    
  }
  .rind-inner {
    position: absolute;
    top:4px;
    left:4px;
    right:4px;
    bottom: 4px;
    border-radius: 100%;
    background:#FFE4B7;
  }
  .juicy {
    position: absolute;
    top:4px;
    left:7px;
    right:9px;
    bottom: 7px;
    border-radius: 100%;
    background:$trueOrange;
    overflow:hidden;
  }
  .center {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 20px;
    height: 7px;
    background:#FFE4B7;
    border-radius: 100%;
  }
  .line {
    position: absolute;
    left: 0;
    top: 50%;
    opacity: 0.5;
    right: 0;
    height: 1px;
    background:#FFE4B7;
    &:nth-of-type(2) {
      left: 50%;
      top: 0;
      bottom: 0;
      right: auto;
      width: 1px;
      height: auto;
    }
    &:nth-of-type(3) {
      transform:rotate(20deg);
    }
    &:nth-of-type(4) {
      transform:rotate(-20deg);
    }
  }
  .drip {
    position: absolute;
    left: -2px;
    top:48%;
    width: 5px;
    height: 10px;
    background: $trueOrange;
    border-radius:100%;
    transform: rotate(45deg);    
    animation-name: drip;
    animation-duration: 1.7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
  }
}

.glow {
  position: absolute;
  background: radial-gradient(ellipse at center,  rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 70%);
  width: 70px;
  height: 80px;
  top: 35px;
  left: 25px;
  border-radius:100%;
}

.stem {
  position: absolute;
  top: 28px;
  right: 42px;
  &__base {
    position: absolute;   
    right: 1px;
    top: 0px;
    background: darken(#87922B,5%);
    width: 18px;
    height: 18px;
    transform: rotate(25deg);
    border-radius: 5px 10px 1px 10px;
    box-shadow: 0px 0px 8px rgba(black,0.40);
  }
  &__stalk {
    position:absolute;
    left:-12px;
    top:-8px;
    background: #87922B;
    width: 12px;
    height: 20px;
    transform: rotate(40deg);
    border-radius: 5px 10px 1px 10px;    
  }
}

.spatter {
  position: absolute;
  top: calc(#{$originX} + 60px);
  left: calc(50% - 260px);
  span {
    background:darken(#9D0327,10%);
    border-radius:100%;
    width:30px;
    height: 10px;
    display: block;
    &:nth-of-type(2) {
      position: relative;
      top: 5px;
      left: 25px;
      opacity:0.5;
      width: 40px;
      height: 15px;
    }
    &:nth-of-type(3) {
      position: relative;
      top: -13px;
      left: -20px;
      opacity: 0.35;
      width: 22px;
      height: 8px;
    }
  }
}

@keyframes drip {
  0% { transform: rotate(45deg); }  
  25% { transform: rotate(45deg); left: -20px; top: 58%; opacity:1; width:5px;}
  35% { transform: rotate(45deg) scale(1.5); opacity:0.5; left: -22px; top: 59%; height:4px;}
  50% { transform: rotate(45deg) scale(1.5); opacity:0; left: -26px; top: 58%; width:16px;}
  100% { transform: rotate(45deg) scale(1.5); opacity:0; left: -26px; top: 65%; width:16px;}
}

.bounce {
  animation-name: bounce;
  animation-duration: 1.45s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

@keyframes bounce {
    0%   { transform: scale(1,1)      translateY(0); }
    10%  { transform: scale(1.1,.9)   translateY(0); }
    30%  { transform: scale(.9,1.1)   translateY(-85px); }
    50%  { transform: scale(1.05,.9) translateY(10px); }
    57%  { transform: scale(1,1)      translateY(-15px); }
    64%  { transform: scale(1,1)      translateY(0); }
    100% { transform: scale(1,1)      translateY(0); }
}

.sigh {
  animation-name: sigh;
  animation-duration: 1.7s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
  animation-delay:-400ms;
}

@keyframes sigh {
    0%   { transform: scale(1)        translateY(0)       rotate(-45deg); }
    30%  { transform: scale(1.03,.97) translateY(5px)    rotate(-45deg); }
    57%  { transform: scale(1,1)      translateY(0)       rotate(-45deg); }
    100% { transform: scale(1,1)      translateY(0)       rotate(-45deg); }
}

.shrink {
  animation-name: shrink;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

@keyframes shrink {
    0%   { transform: scale(1,1)      translateY(0); }
    10%  { transform: scale(1.1,.9)   translateY(0); }
    30%  { transform: scale(.8,1.1)   translateY(0); }
    50%  { transform: scale(1.15,.95) translateY(0); }
    57%  { transform: scale(1,1)      translateY(0); }
    64%  { transform: scale(1,1)      translateY(0); }
    100% { transform: scale(1,1)      translateY(0); }
}
</style>
